import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  TextInput,
} from 'react-native';
import * as defaultStyles from '../constants/DefaultStyles';
import Icon from 'react-native-vector-icons/FontAwesome';

export default class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchContent: '无搜索内容',
    };
  }
  _leftBtn() {
    if (this.props.leftImage) {
      return (<Icon name={this.props.leftImage} color="white" size={25} style={styles.navBarLeftBtn}/>);
    }
  }
  _setSearchContent(text) {
    if (text.length === 0) {
      this.state.searchContent = '无搜索内容';
    }
    else {
      this.state.searchContent = text;
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={{flex: 1, justifyContent: 'center', paddingLeft: 10}}
                          onPress={() => {
                            if (this.props.leftClick)
                              this.props.leftClick();
                          }}
        >
          {this._leftBtn()}
        </TouchableOpacity>
        <View style={{flex: 6, flexDirection: 'row'}}>
          <View style={styles.searchInputContainer}>
            <Icon name="search" color="gray" size={20} style={{marginLeft: 5}}/>
            <TextInput placeholder={' 请输入搜索内容'} underlineColorAndroid="transparent"
                         placeholderTextColor={'gray'} style={defaultStyles.isIOS ? styles.searchInputIOS : styles.searchInputAndroid}
                       onChangeText={(text) =>
                         this._setSearchContent(text)
                       }
                       onSubmitEditing={() =>{
                         if (this.props.rightClick){
                            this.props.rightClick(this.state.searchContent);
                         }
                       }} returnKeyType="search"
            />
          </View>
        </View>
        <TouchableOpacity style={{flex: 2, alignItems: 'center', justifyContent: 'center'}}
                          onPress={() => {
                            if (this.props.rightClick)
                              this.props.rightClick(this.state.searchContent);
                          }
         }>
          <Text style={{fontSize: 20, color: 'white'}}>搜索</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: defaultStyles.NAVBARHEIGHT,
    flexDirection: 'row',
    paddingTop: defaultStyles.NAVPADDINGTOP,
    backgroundColor: defaultStyles.LIGHTBLUE,
  },
  searchInputContainer: {
    backgroundColor: defaultStyles.WHITEOFBACKGROUND,
    flexDirection:'row',
    flex: 1,
    alignItems: 'center',
    marginTop: 7,
    marginBottom: 7,
    borderRadius: 5,
  },
  searchInputIOS: {
    flex: 1,
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 5,
  },
  searchInputAndroid: {
    flex: 1,
    height: 100,
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 5
  }

});